import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Icon, Tools, DateSwitch, ActivityIndicator } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { renderIcon } from '../public/BlogUtils';

const getLabel = Tools.getLabel;
/* 微博报表页面 */
@withRouter
@inject('blogReportStore')
@observer
export default class MyReport extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-report-myReport'
  }

  /* 时间格式转换 */
  getNow = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    return y + '-' + m;
  }

  // 日期更新
  dateChange = (date) => {
    const { blogReportStore : { getMyBlogReport } } = this.props;
    let str = date.split('-');
    getMyBlogReport({ year:str[0], month:str[1] });
  }

  // 我的报表
  renderCell = (cell,key) => {
    const { prefixCls } = this.props;
    let { cellType, cellValue, oLeftNum, oRightNum } = cell;
    if (key === 0 && cell && cell.cellValue == '') {
      return <td key={key} className={`${prefixCls}-main-content-main-normalTd-${key}`}><span>{getLabel(22823,'日期')}</span></td>
    }
    if(cellType === 'index' || (cellValue === '指数' && cellType === 'normal')){
      return;
    }
    if(cellType === 'normal' || cellType === 'header'){
      return <td key={key} className={`${prefixCls}-main-content-main-normalTd-${key}`}><span>{cellValue}</span></td>
    }
    if(cellType === 'report'){
      return <td key={key}><Icon type={renderIcon[cellValue].icon} color={renderIcon[cellValue].color} size='xxs'/></td>
    }
    if(cellType === 'total'){
      return <td key={key}><span style={{color:'red'}}>{oLeftNum}</span>/<span>{oRightNum}</span></td>
    }
  }

  iconInfo = (key, name) => {
    return (
      <span className={name}>
        <Icon type={renderIcon[key].icon} color={renderIcon[key].color} size='xxs'/><span>{renderIcon[key].textFunc()}</span>
      </span>
    )
  }

  render()  {
    const { prefixCls, blogReportStore, blogReportStore : { isLoading } } = this.props;
    const table = toJS(blogReportStore.table);
    let latest = this.getNow();
    return (
      <div className={prefixCls}>
        {isLoading && <div className={`${prefixCls}-loading`}><ActivityIndicator toast text="Loading..." /></div>}
        <div className={`${prefixCls}-date`}>
          <DateSwitch value={new Date()} type='month' onChange={date => this.dateChange(date)} dateConfig={{ maxDate: latest }}/>
        </div>
        <div className={`${prefixCls}-main`}>
          <table className={`${prefixCls}-main-title`}>
            <thead>
              {
                table.map((tr,i)=>{
                  if (i === 0) {
                    return <tr key={i} className={`${prefixCls}-main-title-tableTr-${i}`}>{tr.map((td,j) => this.renderCell(td,j))}</tr>
                  }
                })
              }
            </thead>
          </table>
          <div className={`${prefixCls}-main-content`}>
            <table className={`${prefixCls}-main-content-main`}>
              <tbody>
                {
                  table.map((tr,i)=>{
                    if (i !== 0) {
                      return <tr key={i} className={`${prefixCls}-main-content-main-tableTr-${i}`}>{tr.map((td,j) => this.renderCell(td,j))}</tr>
                    }
                  })
                }
              </tbody>
            </table>
          </div>
        </div>
        <div className={`${prefixCls}-tip`}>
          <div className={`${prefixCls}-tip-title`}>{getLabel(25734,'说明')}:</div>
          <div className={`${prefixCls}-tip-row`}>
            {this.iconInfo('blog_submit_ok', `${prefixCls}-tip-value`)}
            {this.iconInfo('delay_submit', `${prefixCls}-tip-value`)}
            {this.iconInfo('blog_submit_no', `${prefixCls}-tip-value`)}
            {this.iconInfo('mood_unhappy', `${prefixCls}-tip-value`)}
          </div>
          <div className={`${prefixCls}-tip-row`}>
            {this.iconInfo('mood_happy', `${prefixCls}-tip-value`)}
            {this.iconInfo('sign_absent', `${prefixCls}-tip-value`)}
            {this.iconInfo('sing_late', `${prefixCls}-tip-value`)}
            {this.iconInfo('sign_ok', `${prefixCls}-tip-value`)}
          </div>
          <div className={`${prefixCls}-tip-row`}>
            <span>'{getLabel(523,'总计')}'{getLabel(15191,'格式为')}'<span className={`${prefixCls}-tip-row-red`}>{getLabel(384467,'未提交总数')}</span>/{getLabel(384468,'提交总数')}'</span>
          </div>
        </div>
      </div>
    )
  }
}